<!-- 日报基础界面 -->
<template>
    <div>
        <el-tabs type="border-card" style="margin: 10px">
            <!--日期信息-->
            <el-tab-pane class="tabPaneStyle">
                <span slot="label"><i class="el-icon-date"></i> 日期信息</span>
                <el-container>
                    <el-header>
                        <!-- 操作 -->
                        <div align="left" style="width: 100%; margin: 10px">
                            <el-button @click="queryAllInfo(0)" type="success" icon="el-icon-search" size="small">查询所有</el-button>
                            <el-button @click='showAddInfo(0)' type="primary" icon="el-icon-search" size="small">添加</el-button>
                        </div>
                    </el-header>
                    <el-main>
                        <!-- 表格 -->
                        <el-scrollbar style="height:100%">
                            <div style="width:100%;height:700px;border:solid;">
                                <el-table :data="dateData" border style="width: 100%; margin: 10px">
                                    <el-table-column prop="id" label="ID" width="50%"></el-table-column>
                                    <el-table-column prop="code" label="日期编号" width="100%"></el-table-column>
                                    <el-table-column prop="year" label="年" width="50%"></el-table-column>
                                    <el-table-column prop="month" label="月" width="50%"></el-table-column>
                                    <el-table-column prop="day" label="日" width="50%"></el-table-column>
                                    <el-table-column prop="placeId" label="地点id" width="70%"></el-table-column>
                                    <el-table-column prop="createTime" label="创建时间" width="200%"></el-table-column>
                                    <el-table-column prop="workShift" label="上班时间" width="200%"></el-table-column>
                                    <el-table-column prop="closingTime" label="下班时间" width="200%"></el-table-column>
                                    <el-table-column label="操作" width="150%">
                                        <template slot-scope="scope">
                                            <el-button @click="showUpdateInfo(scope.row, 0, 'view')" type="text" size="small">查看</el-button>
                                            <el-button @click="showUpdateInfo(scope.row, 0, 'update')" type="text" size="small">修改</el-button>
                                            <el-button @click="deleteConfirm(scope.row, 0)" type="text" size="small">删除</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </el-scrollbar>
                    </el-main>
                </el-container>
            </el-tab-pane>

            <!--任务信息-->
            <el-tab-pane class="tabPaneStyle">
                <span slot="label"><i class="el-icon-date"></i> 任务信息</span>
                <el-container>
                    <el-header>
                        <!-- 操作 -->
                        <div align="left" style="width: 100%; margin: 10px">
                            <el-button @click="queryAllInfo(1)" type="success" icon="el-icon-search" size="small">查询所有</el-button>
                            <el-button @click='showAddInfo(1)' type="primary" icon="el-icon-search" size="small">添加</el-button>
                        </div>
                    </el-header>
                    <el-main>
                        <!-- 表格 -->
                        <el-scrollbar style="height:100%">
                            <div style="width:100%;height:700px;border:solid;">
                                <el-table :data="taskData" border style="width: 100%">
                                    <el-table-column prop="id" label="ID" width="50%"></el-table-column>
                                    <el-table-column prop="workDateId" label="日期id" width="70%"></el-table-column>
                                    <el-table-column prop="customId" label="客户id" width="70%"></el-table-column>
                                    <el-table-column prop="projectId" label="项目id" width="70%"></el-table-column>
                                    <el-table-column prop="taskName" label="任务名称" width="120%"></el-table-column>
                                    <el-table-column prop="taskComment" label="任务备注" width="120%"></el-table-column>
                                    <el-table-column prop="taskStatus" label="任务状态" width="50%"></el-table-column>
                                    <el-table-column prop="taskType" label="任务类型" width="50%"></el-table-column>
                                    <el-table-column prop="taskPriority" label="任务优先级" width="70%"></el-table-column>
                                    <el-table-column prop="createTime" label="创建时间" width="200%"></el-table-column>
                                    <el-table-column prop="time" label="项目用时" width="50%"></el-table-column>
                                    <el-table-column prop="startTime" label="开始处理时间" width="200%"></el-table-column>
                                    <el-table-column prop="endTime" label="任务完成时间" width="200%"></el-table-column>
                                    <el-table-column prop="partStartTime" label="片段开始时间" width="200%"></el-table-column>
                                    <el-table-column label="操作" width="150%">
                                        <template slot-scope="scope">
                                            <el-button @click="showUpdateInfo(scope.row, 1, 'view')" type="text" size="small">查看</el-button>
                                            <el-button @click="showUpdateInfo(scope.row, 1, 'update')" type="text" size="small">修改</el-button>
                                            <el-button @click="deleteConfirm(scope.row, 1)" type="text" size="small">删除</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </el-scrollbar>
                    </el-main>
                </el-container>
            </el-tab-pane>

            <!--客户信息-->
            <el-tab-pane class="tabPaneStyle">
                <span slot="label"><i class="el-icon-date"></i> 客户信息</span>
                <el-container>
                    <el-header>
                        <!-- 操作 -->
                        <div align="left" style="width: 100%; margin: 10px">
                            <el-button @click="queryAllInfo(2)" type="success" icon="el-icon-search" size="small">查询所有</el-button>
                            <el-button @click='showAddInfo(2)' type="primary" icon="el-icon-search" size="small">添加</el-button>
                        </div>
                    </el-header>
                    <el-main>
                        <!-- 表格 -->
                        <el-scrollbar style="height:100%">
                            <div style="width:100%;height:700px;border:solid;">
                                <el-table :data="customData" border style="width: 100%">
                                    <el-table-column prop="id" label="ID" width="50%"></el-table-column>
                                    <el-table-column prop="customCode" label="客户编号" width="150%"></el-table-column>
                                    <el-table-column prop="customName" label="客户名称" width="150%"></el-table-column>
                                    <el-table-column prop="comment" label="备注" width="300%"></el-table-column>
                                    <el-table-column prop="createTime" label="创建时间" width="200%"></el-table-column>
                                    <el-table-column label="操作" width="150%">
                                        <template slot-scope="scope">
                                            <el-button @click="showUpdateInfo(scope.row, 2, 'view')" type="text" size="small">查看</el-button>
                                            <el-button @click="showUpdateInfo(scope.row, 2, 'update')" type="text" size="small">修改</el-button>
                                            <el-button @click="deleteConfirm(scope.row, 2)" type="text" size="small">删除</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </el-scrollbar>
                    </el-main>
                </el-container>
            </el-tab-pane>

            <!--项目信息-->
            <el-tab-pane class="tabPaneStyle">
                <span slot="label"><i class="el-icon-date"></i> 项目信息</span>
                <el-container>
                    <el-header>
                        <!-- 操作 -->
                        <div align="left" style="width: 100%; margin: 10px">
                            <el-button @click="queryAllInfo(3)" type="success" icon="el-icon-search" size="small">查询所有</el-button>
                            <el-button @click='showAddInfo(3)' type="primary" icon="el-icon-search" size="small">添加</el-button>
                        </div>
                    </el-header>
                    <el-main>
                        <!-- 表格 -->
                        <el-scrollbar style="height:100%">
                            <div style="width:100%;height:700px;border:solid;">
                                <el-table :data="projectData" border style="width: 100%">
                                    <el-table-column prop="id" label="ID" width="50%"></el-table-column>
                                    <el-table-column prop="code" label="项目编号" width="150%"></el-table-column>
                                    <el-table-column prop="name" label="项目名称" width="150%"></el-table-column>
                                    <el-table-column prop="comment" label="备注" width="300%"></el-table-column>
                                    <el-table-column prop="createTime" label="创建时间" width="200%"></el-table-column>
                                    <el-table-column label="操作" width="150%">
                                        <template slot-scope="scope">
                                            <el-button @click="showUpdateInfo(scope.row, 3, 'view')" type="text" size="small">查看</el-button>
                                            <el-button @click="showUpdateInfo(scope.row, 3, 'update')" type="text" size="small">修改</el-button>
                                            <el-button @click="deleteConfirm(scope.row, 3)" type="text" size="small">删除</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </el-scrollbar>
                    </el-main>
                </el-container>
            </el-tab-pane>

            <!--地点信息-->
            <el-tab-pane class="tabPaneStyle">
                <span slot="label"><i class="el-icon-date"></i> 地点信息</span>
                <el-container>
                    <el-header>
                        <!-- 操作 -->
                        <div align="left" style="width: 100%; margin: 10px">
                            <el-button @click="queryAllInfo(4)" type="success" icon="el-icon-search" size="small">查询所有</el-button>
                            <el-button @click='showAddInfo(4)' type="primary" icon="el-icon-search" size="small">添加</el-button>
                        </div>
                    </el-header>
                    <el-main>
                        <!-- 表格 -->
                        <el-scrollbar style="height:100%">
                            <div style="width:100%;height:700px;border:solid;">
                                <el-table :data="placeData" border style="width: 100%">
                                    <el-table-column prop="id" label="ID" width="50%"></el-table-column>
                                    <el-table-column prop="placeName" label="地点" width="150%"></el-table-column>
                                    <el-table-column prop="factoryName" label="工厂" width="150%"></el-table-column>
                                    <el-table-column prop="comment" label="备注" width="300%"></el-table-column>
                                    <el-table-column prop="createTime" label="创建时间" width="200%"></el-table-column>
                                    <el-table-column label="操作" width="150%">
                                        <template slot-scope="scope">
                                            <el-button @click="showUpdateInfo(scope.row, 4, 'view')" type="text" size="small">查看</el-button>
                                            <el-button @click="showUpdateInfo(scope.row, 4, 'update')" type="text" size="small">修改</el-button>
                                            <el-button @click="deleteConfirm(scope.row, 4)" type="text" size="small">删除</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </el-scrollbar>
                    </el-main>
                </el-container>
            </el-tab-pane>

            <!-- 其他 -->
            <el-tab-pane class="tabPaneStyle">
                <span slot="label"><i class="el-icon-date"></i> 其他</span>
                <div>
                    <el-time-select
                        v-model="startWorkForm.workShift"
                        :picker-options="{ start: '08:30', step: '00:15', end: '13:00' }"
                        placeholder="选择早打卡时间">
                    </el-time-select>
                </div>
                <div style="margin-top: 10px">
                    <template>
                        <el-select v-model="customSelected" placeholder="请选择客户">
                            <el-option
                                    v-for="item in customData"
                                    :key="item.id"
                                    :label="item.customName"
                                    :value="item.id">
                                <span style="float: left">{{ item.customName }}</span>
                                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.customCode }}</span>
                            </el-option>
                        </el-select>
                        <el-select v-model="projectSelected" placeholder="请选择项目">
                            <el-option
                                    v-for="item in projectData"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                <span style="float: left">{{ item.name }}</span>
                                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.code }}</span>
                            </el-option>
                        </el-select>
                        <el-select v-model="placeSelected" placeholder="请选择地点">
                            <el-option
                                    v-for="item in placeData"
                                    :key="item.id"
                                    :label="item.factoryName"
                                    :value="item.id">
                                <span style="float: left">{{ item.factoryName }}</span>
                                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.placeName }}</span>
                            </el-option>
                        </el-select>
                    </template>
                </div>
            </el-tab-pane>

            <!-- 弹出框 -->
            <Date ref="date" @children="queryAllInfo(0)" :dateForm="dateForm"></Date>
            <Task ref="task" @children="queryAllInfo(1)" :taskForm="taskForm"></Task>
            <Custom ref="custom" @children="queryAllInfo(2)" :customForm="customForm"></Custom>
            <Project ref="project" @children="queryAllInfo(3)" :projectForm="projectForm"></Project>
            <Place ref="place" @children="queryAllInfo(4)" :placeForm="placeForm"></Place>

        </el-tabs>
    </div>
</template>

<script>
  import {apiDefaultErrorHandler} from "../../api/base";
  import workDateApi from "../../api/work/workDate";
  import workCustomApi from "../../api/work/workCustom";
  import workPlaceApi from "../../api/work/workPlace";
  import workProjectApi from "../../api/work/workProject";
  import workTaskApi from "../../api/work/workTask";
  import Date from "./basedialog/date"
  import Task from "./basedialog/task"
  import Custom from "./basedialog/custom"
  import Project from "./basedialog/project"
  import Place from "./basedialog/place"

  export default {
    name: "workbase",
    // 注册组件
    components: {
      Date, Task, Custom, Project, Place
    },
    data() {
      return {
        // 查询所有数据的结果
        dateData: [],
        taskData: [],
        customData: [],
        projectData: [],
        placeData: [],
        // 选中的单个数据表单
        dateForm: {},
        taskForm: {},
        customForm: {},
        projectForm: {},
        placeForm: {},
        dateFormAddBase: {
          id: '',
          code: '',
          year: '',
          month: '',
          day: '',
          placeId: 1,
          createTime: '',
          workShift: '',
          closingTime: ''
        },
        taskFormAddBase: {
          id: '',
          workDateId: '',
          customId: 1,
          projectId: 1,
          taskName: '',
          taskComment: '',
          taskStatus: 0,
          taskType: 0,
          taskPriority: 0,
          creatTime: '',
          time: '',
          startTime: '',
          endTime: '',
          partStartTime: ''
        },
        customFormAddBase: {
          id: '',
          customCode: '',
          customName: '',
          comment: '',
          createTime: ''
        },
        projectFormAddBase: {
          id: '',
          code: '',
          name: '',
          comment: '',
          createTime: ''
        },
        placeFormAddBase: {
          id: '',
          placeName: '',
          factoryName: '',
          comment: '',
          createTime: ''
        },
        // 开始工作传递值
        startWorkForm: {
          workShift: '09:30',
        },
        customSelected: 1,
        placeSelected: 1,
        projectSelected: 1
      };
    },
    mounted() {
      this.queryAllInfo(0)
      this.queryAllInfo(1)
      this.queryAllInfo(2)
      this.queryAllInfo(3)
      this.queryAllInfo(4)
    },
    methods: {
      /**
       * 查询所有 0~4
       */
      queryAllInfo(i) {
        if (i === 0) { // 查询日期信息
          workDateApi.queryAll().then(({data}) => {
            if (this.$http.isResponseSuccess(data)) {
              this.dateData = data.list
            } else {
              apiDefaultErrorHandler(data)
            }
          }).catch((ex) => {
            apiDefaultErrorHandler(ex)
          });
        } else if (i === 1) { // 查询任务信息
          workTaskApi.queryAll().then(({data}) => {
            if (this.$http.isResponseSuccess(data)) {
              this.taskData = data.list
            } else {
              apiDefaultErrorHandler(data)
            }
          }).catch((ex) => {
            apiDefaultErrorHandler(ex)
          });
        } else if (i === 2) { // 查询客户信息
          workCustomApi.queryAll().then(({data}) => {
            if (this.$http.isResponseSuccess(data)) {
              this.customData = data.list
            } else {
              apiDefaultErrorHandler(data)
            }
          }).catch((ex) => {
            apiDefaultErrorHandler(ex)
          });
        } else if (i === 3) { // 查询项目信息
          workProjectApi.queryAll().then(({data}) => {
            if (this.$http.isResponseSuccess(data)) {
              this.projectData = data.list
            } else {
              apiDefaultErrorHandler(data)
            }
          }).catch((ex) => {
            apiDefaultErrorHandler(ex)
          });
        } else if (i === 4) { // 查询地点信息
          workPlaceApi.queryAll().then(({data}) => {
            if (this.$http.isResponseSuccess(data)) {
              this.placeData = data.list
            } else {
              apiDefaultErrorHandler(data)
            }
          }).catch((ex) => {
            apiDefaultErrorHandler(ex)
          });
        }
      },
      /**
       * 打开模态框(新增)
       */
      showAddInfo(i) {
        // 弹出对话框
        if (i === 0) {
          this.dateForm = this.dateFormAddBase
          this.dateForm.title = '添加日期信息'
          this.$refs.date.showDialog()
        } else if (i === 1) {
          this.taskForm = this.taskFormAddBase
          this.taskForm.title = '添加任务信息'
          this.$refs.task.showDialog()
        } else if (i === 2) {
          this.customForm = this.customFormAddBase
          this.customForm.title = '添加客户信息'
          this.$refs.custom.showDialog()
        } else if (i === 3) {
          this.projectForm = this.projectFormAddBase
          this.projectForm.title = '添加项目信息'
          this.$refs.project.showDialog()
        } else if (i === 4) {
          this.placeForm = this.placeFormAddBase
          this.placeForm.title = '添加地点信息'
          this.$refs.place.showDialog()
        }
      },
      /**
       * 打开模态框(修改)
       */
      showUpdateInfo(row, i, type) {
        // 弹出对话框
        if (i === 0) {
          this.dateForm = row
          this.dateForm.title = type === 'update' ? '修改日期信息' : '查看日期信息'
          this.$refs.date.showDialog()
        } else if (i === 1) {
          this.taskForm = row
          this.taskForm.title = type === 'update' ? '修改任务信息' : '查看任务信息'
          this.$refs.task.showDialog()
        } else if (i === 2) {
          this.customForm = row
          this.customForm.title = type === 'update' ? '修改客户信息' : '查看客户信息'
          this.$refs.custom.showDialog()
        } else if (i === 3) {
          this.projectForm = row
          this.projectForm.title = type === 'update' ? '修改项目信息' : '查看项目信息'
          this.$refs.project.showDialog()
        } else if (i === 4) {
          this.placeForm = row
          this.placeForm.title = type === 'update' ? '修改地点信息' : '查看地点信息'
          this.$refs.place.showDialog()
        }
      },
      /**
       * 删除提示
       */
      deleteConfirm(row, i) {
        this.$confirm('此操作将永久删除数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteDateInfo(row, i)
          this.clearData(i)
          this.queryAllInfo(i)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      /**
       * 删除数据
       */
      deleteDateInfo(row, i) {
        if (i === 0) {
          workDateApi.delete({id: parseInt(row.id)}).then(({ param }) => {
            if (this.$http.isResponseSuccess(param)) {
              this.$message('删除成功!!');
            } else {
              apiDefaultErrorHandler(param)
            }
          }).catch((ex) => {
            apiDefaultErrorHandler(ex)
          });
        } else if (i === 1) {
          workTaskApi.delete({id: parseInt(row.id)}).then(({ param }) => {
            if (this.$http.isResponseSuccess(param)) {
              this.$message('删除成功!!');
            } else {
              apiDefaultErrorHandler(param)
            }
          }).catch((ex) => {
            apiDefaultErrorHandler(ex)
          });
        } else if (i === 2) {
          workCustomApi.delete({id: parseInt(row.id)}).then(({ param }) => {
            if (this.$http.isResponseSuccess(param)) {
              this.$message('删除成功!!');
            } else {
              apiDefaultErrorHandler(param)
            }
          }).catch((ex) => {
            apiDefaultErrorHandler(ex)
          });
        } else if (i === 3) {
          workProjectApi.delete({id: parseInt(row.id)}).then(({ param }) => {
            if (this.$http.isResponseSuccess(param)) {
              this.$message('删除成功!!');
            } else {
              apiDefaultErrorHandler(param)
            }
          }).catch((ex) => {
            apiDefaultErrorHandler(ex)
          });
        } else if (i === 4) {
          workPlaceApi.delete({id: parseInt(row.id)}).then(({ param }) => {
            if (this.$http.isResponseSuccess(param)) {
              this.$message('删除成功!!');
            } else {
              apiDefaultErrorHandler(param)
            }
          }).catch((ex) => {
            apiDefaultErrorHandler(ex)
          });
        }
      },
      /**
       * 数据清理
       */
      clearData(i) {
        if (i === 0) {
          this.dateForm = this.dateFormAddBase
        } else if (i === 1) {
          this.taskForm = this.taskFormAddBase
        } else if (i === 2) {
          this.customForm = this.customFormAddBase
        } else if (i === 3) {
          this.projectForm = this.placeFormAddBase
        } else if (i === 4) {
          this.placeForm = this.placeFormAddBase
        } else {
          this.dateData = []
          this.taskData = []
          this.customData = []
          this.projectData = []
          this.placeData = []
        }
      }

    }
  }
</script>

<style scoped>
    .tabPaneStyle {
    }
</style>